<template>
  <div class="app-container">
    <div class="filter-container">
      角色名称：
      <el-input placeholder="请输入角色名称" size="small"
                class="filter-item search-item" v-model="searchObj.name"/>
      <el-button size="small" @click="search" class="filter-item" type="primary">
        查询
      </el-button>
      <el-button size="small" @click="reset" class="filter-item">
        重置
      </el-button>
      <el-button size="small" @click="add" class="filter-item" type="success">
        添加角色
      </el-button>
    </div>
    <el-table
      size="medium"
      :data="tabItems"
      ref="table"
      style="width: 100%;"
      v-loading="tabLoading"
    >
      <el-table-column label="角色名称" align="center"
        prop="name"
      />
      <el-table-column label="角色编码" align="center"
        prop="code"
      />
      <!-- <el-table-column label="关联用户数" align="center"
        prop="test2"
      /> -->
      <!-- <el-table-column label="创建用户" align="center"
        prop="test3"
      /> -->
      <el-table-column label="创建时间" align="center"
        prop="createTime"
        min-width="80px"
      />
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="editItem(scope.row)">修改</el-button>
          <el-button
            size="mini"
            type="text"
            @click="deleteItem(scope.row)">删除</el-button>
          <el-button
            size="mini"
            type="text"
            @click="setRoleMenu(scope.row)">权限配置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-box">
      <el-pagination
        :background="true"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        :page-count="pagination.pageCount"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <EditForm 
      ref="edit"
      :type="dialog.type"
      :dialog-visible="dialog.isVisible"
      @close="editClose"
      @success="editSuccess"
    />

    <!-- 配置权限框 -->
    <SetRoleMenuForm
      ref="set"
      :dialog-visible="setDialogVisible"
      @close="setDialogVisible=false"
    />
  </div>
</template>

<script>
import EditForm from '@/components/platform/role/EditForm.vue';
import SetRoleMenuForm from '@/components/platform/role/SetRoleMenuForm.vue';
import {selectRolePage, deleteRole, getRoleMenu} from '@/http/apiUrls.js';

export default {
  name: 'Role',
  components:{ EditForm, SetRoleMenuForm },
  data() {
    return {
      // 编辑框
      dialog:{
        isVisible: false,
        type: 'add'
      },
      // 权限配置框
      setDialogVisible:false,
      tabLoading: false,
      tableKey: 0,
      pageItems: 10, // 每页查询条数
      pagination: {
        currentPage: 1, // 当前页
        pageSize: 10, // 每页显示条数
        pageCount: 1, // 总页数
      },
      tabItems: [],
      searchObj: {
        name: ''
      },
    }
  },
  created(){
    this.getData(1, this.pageItems, this.searchObj)
  },
  methods: {
    search(){
      this.getData(1, this.pageItems, this.searchObj)
    },
    reset(){
      this.searchObj = {
        name: ''
      }
      this.getData(1, this.pageItems, {})
    },
    getData(current , size, model){
      let requestData = {
        current,
        size,
        model
      }
      this.tabLoading = true;
      this.$postJson(selectRolePage, requestData).then(res => {
        this.tabLoading = false;
        if(res){
          const pagination = {
            currentPage: parseInt(res.current), // 当前页面号
            pageSize: parseInt(res.size), // 每页条目数
            pageCount: parseInt(res.pages), // 总页面数
          }
          this.pagination = pagination;
          this.tabItems = res.records;
        }
      })
    },
    async handleCurrentChange(val) {
      await this.getData(val, this.pageItems, this.searchObj)
    },
    async handleSizeChange(val) {
      this.pageItems = val
      await this.getData(1, this.pageItems, this.searchObj)
    },
    add(){
      this.dialog = {
        isVisible: true,
        type: 'add'
      }
    },
    editItem(item){
      this.$refs.edit.setEditObj(item)
      this.dialog = {
        isVisible: true,
        type: 'edit'
      }
    },
    deleteItem(item){
      this.$confirm('是否删除该角色?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteSubmit(item)
      });
    },
    deleteSubmit(item){
      const requestData = [item.id]
      this.$postJson(deleteRole, requestData).then(res => {
        if(res){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getData(1, this.pageItems, this.searchObj)
        }
      })
    },
    editClose() {
      this.dialog.isVisible = false;
    },
    editSuccess() {
      this.getData(1, this.pageItems, this.searchObj)
    },
    setRoleMenu(item){
      this.$refs.set.setEditObj(item)
      this.setDialogVisible = true;
      // let selectIds = await this.getRoleMenuData(item)
      // this.getRoleMenuData(item);
    },
    getRoleMenuData(item){
      let url = getRoleMenu+item.id
      let _this = this;
      _this.$getJson(url).then(res => {
        if(res){
          let ids = res.map(m => m.menuId)
          this.$refs.set.setEditObj(item)
          this.$refs.set.setSelectRoles(ids)
          this.setDialogVisible = true;
        }
      })
      // return new Promise((resolve, reject) => {
      //   _this.$getJson(url).then(res => {
      //     if(res){
      //       let ids = res.map(m => m.menuId)
            
      //       resolve(ids)
      //     }
      //   })
      // })
    },
  }
}
</script>
<style scoped>

</style>